<template>
    <div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-diaodu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>技术服务费设置</el-breadcrumb-item>
			<el-breadcrumb-item>技术服务费规则</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15 px_10">
			<h4 v-if="formData.id" class="border-bottom pb_10 mb_20">编辑技术服务费规则</h4>
			<h4 v-else class="border-bottom pb_10 mb_20">新增技术服务费规则</h4>
			<el-form :model="formData" :rules="rules" ref="formData" label-width="100px" class="mw_800">
				<el-form-item class="form-item" label="执行城市" prop="city_id">
					<el-select v-model="formData.city_id" placeholder="请选择" @change="changeCity" :disabled='disabled'>
						<el-option
							v-for="item in cityList"
							:key="item.id"
							:label="item.city_name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="form-item" label="执行商圈" prop="area_id">
					<el-select v-model="formData.area_id" filterable :disabled='disabled'>
						<!-- <el-option v-if="formData.city_id && roleType == '1'" label="全部" value='0'></el-option> -->
						<el-option
							v-for="item in areaList"
							:key="item.id"
							:label="item.area_name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="form-item" label="所属行业" prop="industry">
					<el-select v-model="formData.industry" placeholder="请选择" @change="changeIndustry" :disabled='disabled'>
						<el-option
							v-for="(item, index) in industryJobList"
							:key="index"
							:label="item.label_name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="form-item" label="岗位名称" prop="label_id">
					<el-select v-model="formData.label_id" placeholder="请选择" :disabled='disabled'>
						<el-option
							v-for="item in job_type"
							:key="item.id"
							:label="item.label_name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<div class="form-item flex">
					<div class="label"><span class="redStart">*</span>技术服务费</div>
					<div>
						<div class="rule-list">
							<div class="rule-item">
								<div class="rule-item-label">等级</div>
								<div class="rule-item-content">技术服务费</div>
							</div>
							<div class="rule-item">
								<div class="rule-item-label">黄金</div>
								<el-input :change="checkPrice('30')" v-model="formData.fee30" class="w_100" placeholder="请输入金额"></el-input>
								<div class="rule-item-unit">元/小时</div>
							</div>
							<div class="rule-item">
								<div class="rule-item-label">白银</div>
								<el-input :change="checkPrice('20')" v-model="formData.fee20" class="w_100" placeholder="请输入金额"></el-input>
								<div class="rule-item-unit">元/小时</div>
							</div>
							<div class="rule-item">
								<div class="rule-item-label">青铜</div>
								<el-input :change="checkPrice('10')" v-model="formData.fee10" class="w_100" placeholder="请输入金额"></el-input>
								<div class="rule-item-unit">元/小时</div>
							</div>
						</div>
						<div class="rule-prompt">
							*青铜级为最低等级，越往上等级越高
						</div>
					</div>
				</div>
				<el-form-item class="form-item" label="备注">
					<el-input type="textarea" v-model="formData.remark" style="width:300px" maxlength="250"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm()">保存</el-button>
					<el-button @click="goBack()">返回</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
const MAX_RULE_COUNT = 5
import { fetchCityList } from '@/api/city.js'
import { fetchAreaList,createFee,editorFee } from '@/api/shop.js'
import { fetchIndustryJob } from '@/api/label.js'

export default {
	name: 'addManageFee',
	data() {
		return {
			cityList: [], // 城市列表
			areaList: [], // 商圈
			industryJobList: [], //行业列表
			job_type: [], //岗位列表
			formData: {
				city_id: '', // 城市
				area_id: '', // 商圈id
				industry: '', // 所属行业
				label_id: '', // 岗位名称
				fee10: '', //青铜价格
				fee20: '', //白银价格
				fee30: '', //黄金价格
				remark: '', //备注
			},
			rules: {
				city_id: [{ required: true, message: '请选择执行城市', trigger: 'change' }],
				area_id: [{ required: true, message: '请选择执行商圈', trigger: 'change' }],
				industry: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
				label_id: [{ required: true, message: '请选择岗位名称', trigger: 'change' }]
			},
			disabled: false,
			roleType: ''
		}

	},
	created() {
		if(this.$route.query.id){
			let { city_id,industry,label_id,fee10,fee20,fee30,remark,id,area_id } = this.$route.query;
			this.formData.city_id = +city_id;
			this.formData.area_id = +area_id;
			this.formData.industry = +industry;
			this.formData.label_id = +label_id;
			this.formData.fee10 = +fee10/100;
			this.formData.fee20 = +fee20/100;
			this.formData.fee30 = +fee30/100;
			this.formData.remark = remark;
			this.formData.id = +id;
			this.disabled = true
		}
		let ret = JSON.parse(sessionStorage.getItem('manageInfo'));
		this.roleType = ret.role_info.type
	},
	mounted() {
		// 获取城市列表
		this.getCityList()
	},
	methods: {
		// 获取城市列表
		async getCityList() {
			try {
				let ret = await fetchCityList()
				this.cityList = ret.list
				if(this.formData.id){
					this.getIndustryJob(); //获取行业
					this.getAreaList(); //获取商圈
				}
			} catch (err) {
				console.log('err:', err)
			}
		},
		// 监听城市val变化
		changeCity() {
			this.getIndustryJob()
			this.getAreaList()
			this.formData.area_id = '' // 商圈id
			this.formData.industry = '' // 所属行业
			this.formData.label_id = '' // 岗位名称
		},
		//商圈列表
		async getAreaList() {
			try {
				let ret = await fetchAreaList({
					city_id: this.formData.city_id
				})
				let arr = []
				if(this.roleType == '1' || this.formData.id){
					arr.push({area_name:'全部',id:+0})
				}
				ret.list.forEach(item => {
					if(item.area_name != '无商圈'){
						let obj = {
							area_name:item.area_name,
							id: +item.id
						}
						arr.push(obj)
					}
				})
				this.areaList = arr
			} catch (err) {
				console.log('err:', err)
			}
		},
		//行业列表
		async getIndustryJob() {
			try {
				let ret = await fetchIndustryJob({
					city_id: this.formData.city_id
				})
				this.industryJobList = ret
				if(this.formData.id){
					this.job_type = this.industryJobList.filter(x => x.id == this.formData.industry)[0].children
				}
			} catch (err) {
				console.log(err)
			}
		},
		//监听行业
		changeIndustry() {
			//清理岗位
			this.formData.label_id = '';
			//岗位列表
			this.job_type = this.industryJobList.filter(x => x.id == this.formData.industry)[0].children
		},

		// 确认添加管理费 - 验证
		async submitForm() {
			let validate = await this.$refs.formData.validate().catch(err => err)
			if (!validate) { return }
			if(!this.formData.fee10||!this.formData.fee20||!this.formData.fee30){
				this.$message.error('技术服务费不能为空')
				return
			}
			// 验证成功  创建管理费
			this.addFee()
		},

		// 创建管理费规则
		async addFee() {
			let obj = {
				city_id: this.formData.city_id, // 城市
				area_id: this.formData.area_id, // 商圈id
				industry: this.formData.industry, // 所属行业
				label_id: this.formData.label_id, // 岗位名称
				fee10: +((this.formData.fee10*100).toFixed(2)), //青铜价格
				fee20: +((this.formData.fee20*100).toFixed(2)), //白银价格
				fee30: +((this.formData.fee30*100).toFixed(2)), //黄金价格
				remark: this.formData.remark, //备注
			}
			try {
				if(this.formData.id){
					//编辑
					let ret = await editorFee({id:this.formData.id,...obj})
				}else{
					//新增
					let ret = await createFee(obj)
				}
				this.$message.success('保存成功')
				setTimeout(() => {
					this.$router.go(-1)
				}, 1000)
			} catch (err) {
				console.log('error:', err)
			}
		},

		//价格监听
		async checkPrice (type) {
			let checkPlan = this.formData['fee' + type] + ''
			checkPlan = checkPlan.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
				.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
				.replace(/^\./g, '') // 保证第一个为数字而不是.
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.')
				.replace(/^()*(\d+)\.(\d\d).*$/, '$1$2.$3')
				if(checkPlan>50){
					checkPlan = 50 + ''
				}
			this.formData['fee' + type] = checkPlan
		},

		// 返回
		goBack() {
			this.$router.go(-1)
		}
	}
}
</script>

<style scoped lang="scss">
	.form-item {
		padding: 10px 0;
	}
	.rule-item {
		display: flex;
		margin-bottom: 20px;
	}
	.rule-item span {
		color: #888;
	}
	.rule-text {
		margin: 0 20px;
	}
	.add-btn {
		color: #fff !important;
	}
	.rule-list{
		border: 1px solid #DCDFE6;
		border-radius: 5px;
		padding: 10px 15px 0;
		width: 270px;
		.rule-item{
			.rule-item-label{
				font-weight: bold;
				margin-right: 30px;
			}
			.rule-item-content{
				font-weight: bold;
			}
			.rule-item-unit{
				font-weight: bold;
				margin-left: 15px;
			}
		}
	}
	.rule-prompt{
		color: #D9001B;
		font-size: 12px;
	}
	.label{
		width: 100px;
		padding-right: 12px;
		box-sizing: border-box;
		color: #606266;
		font-size: 12px;
		text-align: right;
	}
	.redStart{
		color: #F56C6C;
		margin-right: 4px;
	}
	>>> input::-webkit-outer-spin-button,
	>>> input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	}
	>>> input[type='number'] {
	-moz-appearance: textfield !important;
	}
</style>



// WEBPACK FOOTER //
// src/components/shopPrice/AddManageFee.vue